<template>
  <div>
    <struct-array-dlg ref="structArrayDlg"></struct-array-dlg>
    <vxe-toolbar>
      <template #buttons>
        <a-button @click="addNewExplain">新增</a-button>
        <a-button @click="removeCheckboxRow()">删除选中</a-button>
      </template>
    </vxe-toolbar>
    <vxe-table
      border
      resizable
      show-overflow
      :data="data"
      ref="xTable"
      keep-source
      size="small"
      :loading="loading"
      :edit-config="{ trigger: 'manual', mode: 'row' }"
    >
      <vxe-table-column type="checkbox" width="60"></vxe-table-column>
      <vxe-table-column
        field="pid"
        title="属性"
        :edit-render="{
          name: '$select',
          options: pNames,
          events: { change: this.pidChanged },
        }"
      ></vxe-table-column>
      <vxe-table-column
        field="sid"
        :edit-render="{
          name: '$select',
          options: subNames,
          props: { disabled: !subNames },
        }"
        title="子属性"
      ></vxe-table-column>

      <vxe-table-column
        field="modbus_param.indexOffset"
        title="索引偏移"
        :edit-render="{
          name: '$input',
          props: { type: 'number', disabled: !curRow.isArray },
        }"
      ></vxe-table-column>

      <vxe-table-column
        field="modbus_param.begin"
        title="开始地址"
        :edit-render="{
          name: '$input',
          props: { type: 'number' },
        }"
      ></vxe-table-column>
      <vxe-table-column
        field="modbus_param.count"
        title="个数"
        :edit-render="{
          name: '$input',
          props: { type: 'number' },
        }"
      ></vxe-table-column>
      <!--
      <vxe-table-column
        field="mobbus_param.code"
        title="功能码"
        :edit-render="{ name: 'select', options: code }"
      ></vxe-table-column>-->
      <vxe-table-column
        field="modbus_param.bigend"
        title="是否大端"
        :edit-render="{
          name: '$select',
          options: trueFalse,
        }"
      ></vxe-table-column>
      <vxe-table-column
        field="modbus_param.swap"
        title="高低互换"
        :edit-render="{
          name: '$select',
          options: trueFalse,
        }"
      ></vxe-table-column>
      <vxe-table-column
        field="modbus_param.number"
        title="乘法因子"
        :edit-render="{
          name: '$input',
          props: { type: 'number', placeholder: '请输入数值' },
        }"
      ></vxe-table-column>
      <vxe-table-column
        field="modbus_param.additive"
        title="加法因子"
        :edit-render="{
          name: '$input',
          props: { type: 'number', placeholder: '请输入数值' },
        }"
      ></vxe-table-column>
      <vxe-table-column
        field="modbus_param.func"
        title="解析函数"
        :edit-render="{
          name: '$input',
        }"
      ></vxe-table-column>
      <vxe-table-column title="操作" width="160">
        <template #default="{ row }">
          <a-space>
            <template v-if="$refs.xTable.isActiveByRow(row)">
              <a @click="saveRowEvent(row)">保存</a>
              <a @click="cancelRowEvent(row)">取消</a>
            </template>
            <template v-else>
              <a @click="editRowEvent(row)">编辑</a>
            </template>

            <a v-if="row.isArray" @click="showArrayDlg(row)">设置数组属性</a>
          </a-space>
        </template>
      </vxe-table-column>
    </vxe-table>
  </div>
</template>
<script>
import StructArrayDlg from "@/components/modbus/StructArrayDlg";
export default {
  name: "ExplainTable",
  components: {
    StructArrayDlg,
  },
  props: ["data", "mbody", "code"],
  data() {
    return {
      loading: false,
      curRow: {},
      subNames: [{ label: "1", value: "2" }],
      trueFalse: [
        { label: "是", value: true },
        { label: "否", value: false },
      ],
      arrayOption: {},
    };
  },
  computed: {
    pNames() {
      if (this.mbody && this.mbody.properties) {
        let names = this.mbody.properties.map((p) => {
          return { label: p.name, value: p.identifier };
        });
        console.log("&&&&&&&&&&", names);
        return names;
      }
      return [];
    },
  },
  methods: {
    showArrayDlg(row) {
      let self = this;
      if (self.arrayOption && self.arrayOption[row.pid]) {
        this.$refs.structArrayDlg.count = self.arrayOption[row.pid].count;
        this.$refs.structArrayDlg.beginPos = self.arrayOption[row.pid].beginPos;
      }

      this.$refs.structArrayDlg.Show(this, (count) => {
        self.arrayOption[row.pid] = count;
        //self.arrayOption[row.pid]
        self.correctData();
      });
    },
    pidChanged(row, id) {
      if (row) {
        this.curRow = row.row;
        this.getSubNames();
      }
    },
    init(row) {
      if (row) {
        if (!row.pid) {
          row.pid = "";
        }
        if (!row.sid) {
          row.sid = "";
        }
        if (!row.index) {
          row.index = 0;
        }
        if (!row.modbus_param.count) {
          row.modbus_param.count = 1;
        }
        if (row.modbus_param.offset == undefined) {
          row.modbus_param.offset = 0;
        }
        if (row.modbus_param.swap == undefined) {
          row.modbus_param.swap = true;
        }
        if (row.modbus_param.bigend == undefined) {
          row.modbus_param.bigend = false;
        }
        if (row.modbus_param.func == undefined) {
          row.modbus_param.func = "";
        }
        if (row.modbus_param.begin == undefined) {
          row.modbus_param.begin = 0;
        }
        if (row.modbus_param.number == undefined) {
          row.modbus_param.number = "";
        }
        if (row.modbus_param.additive == undefined) {
          row.modbus_param.additive = 0;
        }
        if (row.modbus_param.indexOffset == undefined) {
          row.modbus_param.indexOffset = 0;
        }
        if (row.modbus_param.arrayCount == undefined) {
          row.modbus_param.arrayCount = 0;
        }
        if (row.modbus_param.beginPos == undefined) {
          row.modbus_param.beginPos = 0;
        }
      }
    },
    correctData() {
      let self = this;
      setTimeout(() => {
        self.data.forEach((d) => {
          if (d.modbus_param.additive == "") {
            // d.modbus_param.number = undefined
            delete d.modbus_param.additive;
          }
          if (d.modbus_param.number == "") {
            // d.modbus_param.number = undefined
            delete d.modbus_param.number;
          }
          if (typeof d.modbus_param.number == "string") {
            d.modbus_param.number = parseFloat(d.modbus_param.number);
          }
          if (typeof d.modbus_param.additive == "string") {
            d.modbus_param.additive = parseFloat(d.modbus_param.additive);
          }

          if (typeof d.modbus_param.begin == "string") {
            d.modbus_param.begin = parseInt(d.modbus_param.begin);
          }
          if (typeof d.modbus_param.count == "string") {
            d.modbus_param.count = parseInt(d.modbus_param.count);
          }
          if (self.arrayOption[d.pid]) {
            d.modbus_param.arrayCount = self.arrayOption[d.pid].count;
            d.modbus_param.beginPos = self.arrayOption[d.pid].beginPos;
          }
          if (typeof d.modbus_param.indexOffset == "string") {
            d.modbus_param.indexOffset = parseInt(d.modbus_param.indexOffset);
          }
          if (typeof d.modbus_param.arrayCount == "string") {
            d.modbus_param.arrayCount = parseInt(d.modbus_param.arrayCount);
          }
          if (typeof d.modbus_param.beginPos == "string") {
            d.modbus_param.beginPos = parseInt(d.modbus_param.beginPos);
          }
        });
      }, 300);
    },
    getSubNames() {
      if (!this.curRow) {
        this.$set(this, "subNames", []);

        this.$set(this.curRow, "isArray", false);
        return;
      }
      let pid = this.curRow.pid;
      let pro = this.mbody.properties.find((p) => {
        return p.identifier === pid;
      });
      this.$set(
        this.curRow,
        "isArray",
        !pro || !pro.data_type ? false : pro.data_type.type === "array"
      );
      if (
        !pro ||
        (pro.data_type.type !== "struct" && pro.data_type.type !== "array") ||
        !pro.data_type.specs
      ) {
        this.$set(this, "subNames", []);

        return;
      }
      let specs = pro.data_type.specs;
      if (pro.data_type.type == "array") {
        specs = pro.data_type.specs.item.specs;
      }
      let subNames = specs.map((x) => {
        return { label: x.name, value: x.identifier };
      });
      this.$set(this, "subNames", subNames);
      console.log("------------------", this.subNames);
    },
    editRowEvent(row) {
      this.init(row);
      const $table = this.$refs.xTable;
      $table.setActiveRow(row);
      this.curRow = row;
      this.getSubNames();
    },
    saveRowEvent() {
      const $table = this.$refs.xTable;
      let self = this;
      $table.clearActived().finally(() => {
        self.correctData();
      });
    },
    cancelRowEvent(row) {
      const $table = this.$refs.xTable;
      $table.clearActived().then(() => {
        // 还原行数据
        $table.revertData(row);
      });
    },
    addNewExplain() {
      let newParam = {};
      let newRow = { modbus_param: newParam };
      this.init(newRow);
      this.data.push(newRow);
      this.editRowEvent(newRow);
    },
    removeCheckboxRow() {
      let selectRecords = this.$refs.xTable.getCheckboxRecords();
      console.log("------------------", selectRecords);
      let self = this;
      selectRecords.forEach((r) => {
        let i = self.data.findIndex((d) => {
          return d.modbus_param == r.modbus_param;
        });
        if (i >= 0) {
          self.data.splice(i, 1);
        }
      });

      this.$refs.xTable.removeCheckboxRow();
    },
  },
};
</script>
<style>
.vxe-select--panel {
  z-index: 9997 !important;
  color: black;
}
.vxe-cell .vxe-input > .vxe-input--inner,
.vxe-cell .vxe-textarea > .vxe-textarea--inner,
.vxe-table--filter-wrapper .vxe-input > .vxe-input--inner,
.vxe-table--filter-wrapper .vxe-textarea > .vxe-textarea--inner {
  padding: 0 2px;
  color: black;
}
</style>